<template>
    <view class="content">
        <!--记账-->
        <u-grid
                @click="select()"
                col="4">
            <u-grid-item
                    v-for="(item,i) in clazzList"
                    :name="item.id"
                    :key="i">
                <view :class="item.id==form.billClazz?'selectBtn':'noSelectBtn'">
                    <u-icon :style="{textAlign: 'center'}" size="25" :name="item.url"></u-icon>
                    <text class="grid-text">{{item.name}}</text>
                </view>
            </u-grid-item>
        </u-grid>
        <u-divider></u-divider>
        <view class="inputBox">
            <view style="line-height: 76rpx;margin-right: 10rpx;">
                <u--text type="primary" :text="dateText" @click="pickerShow=true"></u--text>
            </view>
            <u--input
                    style="flex: 1"
                    inputAlign="right"
                    placeholder="请输入消费金额"
                    type="number"
                    @change="toMoney"
                    v-model="form.money"
            ></u--input>
        </view>
        <view class="inputBox">
            <u--textarea
                    v-model="form.note"
                    placeholder="请输入备注"
                    showWordLimit
                    :maxlength="50">
            </u--textarea>
        </view>
        <view class="inputBox">
            <u-button :text="form.id==null?'提交':'修改'" type="primary" @click="submit()"></u-button>
            <u-button v-if="form.id!=null && form.id!=''" text="删除" type="primary" @click="del()"></u-button>
        </view>
        <u-toast ref="uToast"></u-toast>
        <u-datetime-picker
                :show="pickerShow"
                v-model="form.billDate"
                mode="date"
                @close="pickerShow = false"
                @confirm="pickerShow = false">
        </u-datetime-picker>

    </view>
</template>

<script>
    export default {
        data() {
            return {
                //分类集合
                clazzList: [],
                //时间选中框显示
                pickerShow: false,
                form: {
                    //消费类型
                    billClazz: "",
                    //金额
                    money: 0,
                    //备注
                    note: "",
                    //消费时间
                    billDate: new Date(),
                },
                dateText: "今天"
            }
        },
        watch: {
            //监听时间框选中
            "form.billDate"(newName, oldName) {
                let date = this.$dateUtil.formatDate(new Date(newName), this.$dateUtil.dateFormat);
                //判断选中时间是否等于当前时间
                let thisDate = this.$dateUtil.formatDate(new Date(), this.$dateUtil.dateFormat);
                if (date == thisDate) {
                    this.dateText = "今天";
                } else {
                    this.dateText = this.$dateUtil.formatDate(new Date(newName), this.$dateUtil.monthDayFormat);
                }
            }
        },
        onLoad(data) {
            this.init();
            if (data.record != null) {
                this.form = JSON.parse(data.record);
            }
        },

        methods: {

            /**
             * 删除当前流水
             */
            del() {
                this.$request(`/bill-record/delete-by-id/${this.form.id}`).then(res => {
                    uni.$u.toast("删除成功")
                    Object.assign(this.form,{
                        id:null,
                        //金额
                        money: 0,
                        //备注
                        note: "",
                        //消费时间
                        billDate: new Date(),
                    })
                })
            },

            //提交
            submit() {
                if (this.form.money == null || this.form.money == "") {
                    this.$refs.uToast.show({
                        message: "请输入消费金额",
                        type: "error"
                    })
                    return;
                }
                let sumbitData = Object.assign(this.form, {
                    billDate: this.$dateUtil.formatDate(new Date(this.form.billDate), this.$dateUtil.dateFormat)
                })

                //判断是否携带id
                let url="";
                let type="";
                if(sumbitData.id==null || sumbitData.id==""){
                    //新增
                    url="/bill-record/add";
                }else{
                    //新增
                    url="/bill-record/update";
                }

                this.$request(url, sumbitData, "POST").then(res => {
                    uni.$u.toast("提交成功")
                 /*   Object.assign(this.form,{
                        //金额
                        money: 0,
                        //备注
                        note: "",
                        //消费时间
                        billDate: new Date(),
                    })*/
                }).catch(err => {
                    console.log("异常了：" + err)
                })
            },

            toMoney(value) {
                var that = this
                //允许输入一个小数点
                value = value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
                //允许输入两位小数
                value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
                //如果金额没有小数点，并且值不等于空，则返回浮点数
                if (value.indexOf(".") < 0 && value != "") {
                    value = parseFloat(value);
                    //如果第一位为小数点，则转换为0. 只保留一个小数点
                } else if (value.indexOf(".") == 0) {
                    value = value.replace(/[^$#$]/g, "0.");
                    value = value.replace(/\.{2,}/g, ".");
                }
                //这里计时器必须使用，不然input框中不会显示校验过的值，只显示你输入的值
                setTimeout(() => {
                    that.form.money = value
                }, 1)
            },

            //选中消费类型
            select(id) {
                this.form.billClazz = id;
            },

            //初始化
            init() {
                //获取分类
                this.$request("/bill-clazz/findList").then(res => {
                    this.clazzList = res.map(x => {
                        x.url = this.$tool.getResources(x.icon);
                        return x;
                    });
                    if (this.clazzList.length > 0) {
                        this.form.billClazz = this.clazzList[0].id;
                    }
                })
            }
        }
    }
</script>


<style lang="scss">

    .content {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;

        .col_box {
            width: 100%;
            text-align: center;
            color: #c0c4cc;
        }

        .selectBtn {
            margin-top: 10rpx;
            padding: 25rpx;
            background: #3de4f9;
            border-radius: 50%;
        }

        .noSelectBtn {
            margin-top: 10rpx;
            padding: 25rpx;
            background: #ffffff;
            border-radius: 50%
        }

        .u-icon--right {
            flex-direction: column !important;
        }

        .inputBox {
            width: 95%;
            margin: 0 auto;
            margin-top: 30px;
            display: flex;

            .u-button {
                width: 40%;
            }
        }

        .u-input, .u-textarea, .u-input__content__field-wrappe {
            font-size: 28rpx !important;
            border-radius: 5rpx !important;
            padding: 20rpx 15rpx !important;
            border: 1px solid #000 !important;
        }
    }


</style>
